<template>
<div class="container">
  <el-row>
    <el-col :span="12">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <div id="avg_speed" class="speed_panel"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <div id="night_speed" class="speed_panel"></div>
      </el-card>
    </el-col>
  </el-row>
</div>
  
</template>

<script>
import echarts from 'echarts'
import Vue from 'Vue'
Vue.use(echarts)
export default {
  props: ['basicInfo'],
  data () {
    return {
      myChart: {},
      myChart1: {},
      data1: [{value: 111, name: '平均车速'}]

    }
  },
  mounted () {
    console.log(this.basicInfo)
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('avg_speed'))
    this.myChart1 = echarts.init(document.getElementById('night_speed'))
    // 平均车速仪表内容
    let option1 = {
      tooltip: {
        formatter: '{b} : {c}km/h'
      },
      // toolbox: {
      //   feature: {
      //     restore: {},
      //     saveAsImage: {}
      //   }
      // },
      title: ([{
        text: '平均车速',
        // top: 'bottom',
        left: 'center',
        bottom: 15,
        textStyle: {
          fontSize: 25
        }
      }]),
      series: [
        {
          type: 'gauge',
          min: 0,
          max: 220,
          detail: {formatter: '{value}km/h'},
          data: [{value: 0, name: '平均车速'}]
        }
      ]
    }
    // 夜间行驶仪盘表
    let option2 = {
      tooltip: {
        formatter: '{b} : {c}km/h'
      },
      title: ([{
        text: '夜间行驶速度',
        // top: 'bottom',
        left: 'center',
        bottom: 15,
        textStyle: {
          fontSize: 25
        }
      }]),
      series: [
        {
          type: 'gauge',
          min: 0,
          max: 220,
          detail: {formatter: '{value}km/h'},
          data: [{value: 0, name: '夜间行驶速度'}]
        }
      ]
    }
    // setInterval(() => {
    //   this.avgSpeed = Math.random()
    //   option2.series[0].data[0].value = parseInt(Math.random() * 200).toFixed(2) - 0
    //   this.myChart1.setOption(option2)
    // }, 2000)
    // 绘制图表
    this.myChart.setOption(option1)
    this.myChart1.setOption(option2)
  }
}
</script>

<style scoped>
.container{
  width: 100%;
}
.box-card{
  width: 80%;
  height: 400px;
  margin: 10px;
  border-radius: 10px; 
}
.speed_panel{
  display: inline-block;
  background: white;
  height: 400px;
  width: 100%;
  border-radius: 15px;
}
.wrapper{
  width: 100%;
  float: left;
}
</style>
